<script lang="ts" setup>
import { ref } from 'vue'
import { DataOverObject } from '@/types/interface'
// 数据总览
const dataOverList = ref<DataOverObject[]>([
    {
        title: '总面积',
        color: '75,170,240',
        value: 0,
        unit: '㎡',
    },
    {
        title: '库位数量',
        color: '75,170,240',
        value: 0,
        unit: ''
    },
    {
        title: '库存商品总量',
        color: '159,149,224',
        backgroudColor: '71,70,124',
        value: 0,
        unit: '',
        isSynTextColor: true,
        isSynBackgroudColor: true
    },
    {
        title: '库存商品总额',
        color: '201,182,120',
        backgroudColor: '106,97,77',
        value: 0,
        unit: '万元',
        isSynTextColor: true,
        isSynBackgroudColor: true
    },
    {
        title: '累计入库量',
        color: '176,238,194',
        backgroudColor: '83,113,114',
        value: 0,
        unit: '',
        isSynTextColor: true,
        isSynBackgroudColor: true
    },
    {
        title: '累计出库量',
        color: '221,158,185',
        backgroudColor: '108,84,114',
        value: 0,
        unit: '',
        isSynTextColor: true,
        isSynBackgroudColor: true
    },
    {
        title: '库存周转率',
        color: '241,176,148',
        backgroudColor: '109,93,98',
        value: 0,
        unit: '%',
        isSynTextColor: true,
        isSynBackgroudColor: true
    },
    {
        title: '客商数量',
        color: '74,167,238',
        value: 0,
        unit: '名'
    },
])
</script>

<template>
    <div class="full-w">
        <SepTitle title="数据总览">
            <template #main>
                <div class="row-normal-wrap full-w p-a-10" style="overflow: auto;">
                    <div class="full-w-0 row-normal-space-around-wrap">
                        <DataOverViewCell class="dataOverViewCell" v-for="(item,index) in dataOverList" :class="[(index > 3 && 'p-t-10')]" :key="index" :item="item"></DataOverViewCell>
                    </div>
                </div>
            </template>
        </SepTitle>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
.dataOverViewCell 
    width 25%
</style>